<template>
  <el-form size="small">
    <el-form-item>
      <el-radio :label="1" v-model="state.radioValue">
        不填，允许的通配符[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :label="2" v-model="state.radioValue"> 每年 </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :label="3" v-model="state.radioValue">
        周期从
        <el-input-number
          v-model="state.cycle01"
          :min="state.fullYear"
          :max="2098"
        />
        -
        <el-input-number
          v-model="state.cycle02"
          :min="state.cycle01 ? state.cycle01 + 1 : state.fullYear + 1"
          :max="2099"
        />
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :label="4" v-model="state.radioValue">
        从
        <el-input-number
          v-model="state.average01"
          :min="state.fullYear"
          :max="2098"
        />
        年开始，每
        <el-input-number
          v-model="state.average02"
          :min="1"
          :max="2099 - state.average01 || state.fullYear"
        />
        年执行一次
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio :label="5" v-model="state.radioValue">
        指定
        <el-select
          clearable
          v-model="state.checkboxList"
          placeholder="可多选"
          multiple
        >
          <el-option
            v-for="item in 9"
            :key="item"
            :value="item - 1 + state.fullYear"
            :label="item - 1 + state.fullYear"
          />
        </el-select>
      </el-radio>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, watch, computed } from "vue";
import { stat } from "fs";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const emit = defineEmits(["update"]);
const state: any = reactive({
  fullYear: 0,
  radioValue: 1,
  cycle01: 0,
  cycle02: 0,
  average01: 0,
  average02: 1,
  checkboxList: [],
  checkNum: null,
});
defineExpose({
  radioValue: state.radioValue,
  checkboxList: state.checkboxList,
});
const props: any = defineProps({
  check: {
    type: String,
    required: true,
  },
  cron: {
    type: String,
    required: true,
  },
  month: {
    type: String,
    required: true,
  },
});
watch(
  props.check,
  (val) => {
    state.checkNum = val;
  },
  {
    immediate: true,
    deep: true,
  },
);
const cycleTotal = computed(() => {
  const cycle01 = state.checkNum(state.cycle01, state.fullYear, 2098);
  const cycle02 = state.checkNum(
    state.cycle02,
    cycle01 ? cycle01 + 1 : state.fullYear + 1,
    2099,
  );
  return cycle01 + "-" + cycle02;
});
const averageTotal = computed(() => {
  const average01 = state.checkNum(state.average01, state.fullYear, 2098);
  const average02 = state.checkNum(
    state.average02,
    1,
    2099 - average01 || state.fullYear,
  );
  return average01 + "/" + average02;
});
const checkboxString = computed(() => {
  let str = state.checkboxList.join();
  return str == "" ? "*" : str;
});
// 单选按钮值变化时
const radioChange = () => {
  switch (state.radioValue) {
    case 1:
      emit("update", "year", "");
      break;
    case 2:
      emit("update", "year", "*");
      break;
    case 3:
      emit("update", "year", cycleTotal.value);
      break;
    case 4:
      emit("update", "year", averageTotal.value);
      break;
    case 5:
      emit("update", "year", checkboxString.value);
      break;
  }
};
// 周期两个值变化时
const cycleChange = () => {
  if (state.radioValue == "3") {
    emit("update", "year", cycleTotal.value);
  }
};
// 平均两个值变化时
const averageChange = () => {
  if (state.radioValue == "4") {
    emit("update", "year", averageTotal.value);
  }
};
// checkbox值变化时
const checkboxChange = () => {
  if (state.radioValue == "5") {
    emit("update", "year", checkboxString.value);
  }
};
watch(state.radioValue, (val) => {
  radioChange();
});
watch(state.cycleTotal, (val) => {
  cycleChange();
});
watch(state.averageTotal, (val) => {
  averageChange();
});
watch(state.checkboxString, (val) => {
  checkboxChange();
});
onMounted(() => {
  // 仅获取当前年份
  state.fullYear = Number(new Date().getFullYear());
  state.cycle01 = state.fullYear;
  state.average01 = state.fullYear;
});
</script>
